<template>
    <div id="surveyList">
      <h2 class="title"> 最近</h2>
  
       <a-flex wrap="wrap" gap="large">
         <a-card hoverable style="width: 200px;height: 250px;" size="small" @click="() => {router.push('/editQuestionare')}">
      <template #cover>
        <img
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      </template>
      <template #actions>
        <a-tooltip >
        <PlayCircleOutlined v-if="!isStart" key="setting" @click.stop="() => { isStart = !isStart }"/>
        <PauseCircleOutlined v-else @click.stop="isStart = !isStart" key="edit" />
  
          <template #title v-if="!isStart">
            <span>停止</span>
          </template>
          <template #title v-else>
            <span>开始</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <edit-outlined key="edit"/>
          <template #title>
            <span>编辑问卷</span>
          </template>
        </a-tooltip>
        <a-tooltip>
            <a-dropdown>
        <ellipsis-outlined key="ellipsis" @click.stop=""/>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
          <template #title>
            <span>更多信息</span>
          </template>
        </a-tooltip>
      </template>
      <a-card-meta title="问卷标题" description="2个月前 0份">
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
  
     <a-card hoverable style="width: 200px;height: 250px;" size="small">
      <template #cover>
        <img
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      </template>
      <template #actions>
        <a-tooltip>
        <setting-outlined key="setting" />
          <template #title>
            <span>设置问卷信息</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <edit-outlined key="edit" />
  
          <template #title>
            <span>编辑问卷</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <ellipsis-outlined key="ellipsis" />
          <template #title>
            <span>更多信息</span>
          </template>
        </a-tooltip>
      </template>
      <a-card-meta title="问卷标题" description="2个月前 0份">
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
  
     <a-card hoverable style="width: 200px;height: 250px;" size="small">
      <template #cover>
        <img
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      </template>
      <template #actions>
        <a-tooltip>
        <setting-outlined key="setting" />
          <template #title>
            <span>设置问卷信息</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <edit-outlined key="edit" />
  
          <template #title>
            <span>编辑问卷</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <ellipsis-outlined key="ellipsis" />
          <template #title>
            <span>更多信息</span>
          </template>
        </a-tooltip>
      </template>
      <a-card-meta title="问卷标题" description="2个月前 0份">
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
  
  
  
     <a-card hoverable style="width: 200px;height: 250px;" size="small">
      <template #cover>
        <img
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      </template>
      <template #actions>
        <a-tooltip>
        <setting-outlined key="setting" />
          <template #title>
            <span>设置问卷信息</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <edit-outlined key="edit" />
  
          <template #title>
            <span>编辑问卷</span>
          </template>
        </a-tooltip>
        <a-tooltip>
        <ellipsis-outlined key="ellipsis" />
          <template #title>
            <span>更多信息</span>
          </template>
        </a-tooltip>
      </template>
      <a-card-meta title="问卷标题" description="2个月前 0份">
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
    </a-flex>
     
  
    
    
    </div>
  </template>
  
  <script setup>
  import {ref,reactive} from 'vue';
  import { EllipsisOutlined, SettingOutlined, EditOutlined,
    PlayCircleOutlined, PauseCircleOutlined,
   } from '@ant-design/icons-vue';
  import router from '../router';
  
  const isStart = ref(true)
  </script>
  
  <style scoped>
  .surveyList {
    display: flex;
  }
  .title {
    font-size: 26px;
    font-weight: 700;
  }
  
  </style>